import React from 'react';
import { Badge, TabBar } from 'antd-mobile';
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';
//引入scss样式文件
import '@/assets/css/tabbar.scss';
import { useHistory, useLocation } from 'react-router-dom';
const Apptabbar = () => {

    // 获取本地token
    const token = localStorage.getItem('token')
    //console.log('token', token);
    // 定义的tabbar 数组
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline />
        },
        {
            key: '/cart',
            title: '购物车',
            icon: < MessageOutline />
        },
        {
            key: token ? '/mine' : '/login',
            title: token ? '我的' : '登录',
            icon: token ? <UserOutline /> : <UnorderedListOutline />,
        },
    ]

    // 获取当期路径
    const loc = useLocation()
    // console.log('loc', loc);
    const pathname = loc.pathname;
    const his = useHistory();
    // console.log('his', his);
    const setRouteActive = (value) => {
        //console.log('value', value);
        his.push(value)
    }
    return (
        <>
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </>
    );
}

export default Apptabbar;
